<html>
<title>style</title>

<head>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            let app = new Vue({
                el: '.container',
                data: {
                    aa: "cf",
                    bb: "bk",
                    cc: "cf",
                    flag: true,
                    hello: { cf: true, bk: true },
                    xx: { color: "brown", fontSize: '30px' },
                    yy:{backGround:"cornsilk"}
                },
                methods: {

                }
            })
        }

    </script>
    <style>
        .cf {
            color: brown;
            font-size: 20px;
        }

        .bk {
            background-color: cornsilk;
        }
    </style>
</head>

<body>
    <div class="container">
        <p :class="[aa,bb]">方式一</p>
        <p :class="{cf:true,bk:flag}">方式二(常用)</p>
        <p :class="cc">方式三</p>
        <p :class="hello">方式四（变量引用json格式）</p>
        <p :style="[xx,yy]">绑定style</p>
    </div>
</body>

</html>